
<style>
  :host {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 8px 0;
  }

  .angular-todo {
      width: 300px;
      padding: 10px;
      background-color: #eee;
  }

  .title {
      background-color: #CCCCCC;
      height: 40px;
      line-height: 40px;
      text-align: center;
  }

  .input-contaniner {
      display: flex;
      padding: 0 10px;
      margin-top: 20px;
  }

  .input-contaniner input {
      flex: 1;
  }

  .input-contaniner button {
      width: 50px;
      margin-left: 20px;
      color: red;
      height: 30px;
  }

  .subtitle {
    height: 60px;
    line-height: 60px;
    font-weight: 700;
    text-align: center;
  }

  ul {
      padding: 10px;
      margin: 0;
      border: 1px solid #202020;
      border-radius: 20px;
      margin-top: 20px;
  }

  li {
      list-style: none;
      padding: 10px 0;
      height: 30px;
      line-height: 30px;
      display: flex;
  }

  li button {
      width: 50px;
      margin-left:  auto;
      color: red;
  }
</style>

<div class="angular-todo">
  <div class="title">Angular TodoList</div>
  <div class="input-contaniner">
    <input [(ngModel)]="newTodo" placeholder="add todo">
    <button (click)="addTodo()">添加</button>
  </div>

  <div class="subtitle">正在进行</div>
  <ul *ngIf="todos.length">
    <li *ngFor="let todo of todos;let i =index">
      <input type="checkbox" [(ngModel)]="todo.check" (ngModelChange)="onCheckboxChangeDoing(i)" > {{todo.text}} <button (click)="deleteTodo(i, 'doing')">删除</button>
    </li>
  </ul>
  <div class="subtitle">已经完成</div>
  <ul *ngIf="doneList.length>0">
    <li *ngFor="let todo of doneList;let i =index">
      <input type="checkbox" [(ngModel)]="todo.check" (ngModelChange)="onCheckboxChangeDone(i)" > {{todo.text}} <button (click)="deleteTodo(i, 'done')">删除</button>
    </li>
  </ul>
</div>
